<script setup lang="ts">
import type { User } from '$/client'
import { roleSelections } from '@/scripts/vexip/presets'
import type { CommonFormProps } from '@/types'
import { Form, FormItem, FormSubmit, Input, Select } from 'vexip-ui'
import ImageUpload from '../custom/ImageUpload.vue'

defineProps<CommonFormProps>()

const model = defineModel<User>({ required: true })
</script>

<template>
  <Form :model="model" :loading="loading">
    <FormItem label="用户名" prop="username" required>
      <Input />
    </FormItem>
    <FormItem label="密码" prop="password" required>
      <Input plain-password />
    </FormItem>
    <FormItem label="用户类型" prop="role" required>
      <Select :options="roleSelections" />
    </FormItem>
    <FormItem label="名称" prop="name">
      <Input />
    </FormItem>
    <FormItem label="头像" prop="unknown">
      <ImageUpload v-model="model.avatar" />
    </FormItem>
    <FormItem action>
      <FormSubmit @submit="submit" block />
    </FormItem>
  </Form>
</template>
